/* styles.css 完整主题方案 */
:root {
  /* 过渡动画 */
  --transition-duration: 0.3s;
  --transition-function: cubic-bezier(0.4, 0, 0.2, 1);
  --progress:0%;
}
/* 亮色主题默认值 */
[data-theme="light"] {
  /* 基础颜色 */
  --bg-color: #ffffff;
  --text-color: #2c3e50;
  --border-color: #dcdfe6;
  
  /* Element Plus 核心变量 */
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-rgb: 64, 158, 255 !important;
  
  --el-bg-color: var(--bg-color) !important;
  --el-text-color-primary: var(--text-color) !important;
  --el-border-color :var(--border-color) !important;
  --el-border-color-light: var(--border-color) !important;

  /* 组件颜色 */
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-input-bg-color: #f5f7fa !important;
  --el-menu-bg-color: var(--bg-color) !important;
  --el-table-bg-color: var(--bg-color) !important;
  --el-tag-bg-color: #ecf5ff !important;
  --el-bg-color-page: #f0f2f5 !important;
  
  /* 状态颜色 */
  --el-color-success: #67c23a !important;
  --el-color-warning: #e6a23c !important;
  --el-color-danger: #f56c6c !important;
  --el-color-info: #909399 !important;
  
  /* 文字颜色 */
  --el-text-color-regular: #606266 !important;
  --el-text-color-secondary: #909399 !important;
  
  /* 阴影 */
  --el-box-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.1) !important;

  /* Input 文字颜色 */
  --el-input-text-color: var(--text-color);
  /* Placeholder 颜色 */
  --el-input-placeholder-color: #999;
  /* Hover 边框 */
  --el-input-hover-border-color: var(--el-color-primary-light-3);
  /* Focus 边框 */
  --el-input-focus-border-color: var(--el-color-primary);

  --code-bg: #f8f8f8;
  --code-border: #e4e7ed;
  
  /* 卡片阴影 */
  --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/* 暗色主题 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e5e7eb;
  --border-color: #434343;
  --el-color-primary: #1668dc;
  --el-color-primary-light-3: #2a7ae0;
  --el-color-primary-light-5: #3d8ce4;
  --el-color-primary-light-7: #519ee8;
  --el-color-primary-light-9: #65b0ec;
  --el-color-primary-rgb: 22, 104, 220 !important;

  --el-bg-color: var(--bg-color) !important;
  --el-text-color-primary: var(--text-color) !important;
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: var(--border-color) !important;
  /* 组件颜色 */
  --el-button-bg-color: #2a2a2a !important;
  --el-input-bg-color: #2d2d2d !important;
  --el-menu-bg-color: #1f1f1f !important;
  --el-table-bg-color: #262626 !important;
  --el-tag-bg-color: rgba(22, 104, 220, 0.2) !important;
  --el-bg-color-page: #1f1f1f !important;
  /* 状态颜色 */
  --el-color-success: #85ce61 !important;
  --el-color-warning: #ebb563 !important;
  --el-color-danger: #f78989 !important;
  --el-color-info: #a1a3a8 !important;
  /* 文字颜色 */
  --el-text-color-regular: #d0d4db !important;
  --el-text-color-secondary: #8c8c8c !important;
  /* 阴影 */
  --el-box-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.3) !important;

  --el-input-text-color: #e5e7eb;
  --el-input-placeholder-color: #666;
  --el-input-hover-border-color: var(--el-color-primary-light-5);
  --el-input-focus-border-color: var(--el-color-primary-light-7);
  
  /* 调整暗色输入框禁用状态 */
  --el-input-disabled-bg-color: #333;
  --el-input-disabled-border-color: #444;

  --code-bg: #4c4c4c;
  --code-border: #787878;
  
  --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

/* 新增 Ocean Midnight 主题 */
[data-theme="midnight"] {
  /* 基础三色 */
  --bg-color: #0f172a;         /* 深海军蓝背景 */
  --text-color: #e2e8f0;       /* 柔和灰白色文字 */
  --border-color: #334155;     /* 中灰蓝色边框 */

  /* 主色调 - 青蓝色 */
  --el-color-primary: #0ea5e9; /* 明亮青蓝色 */
  --el-color-primary-light-3: #38bdf8;
  --el-color-primary-light-5: #7dd3fc;
  --el-color-primary-light-7: #bae6fd;
  --el-color-primary-rgb: 14, 165, 233 !important;
  
  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #1e293b !important;      /* 稍浅页面背景 */
  --el-bg-color-overlay: #1e293b !important;   /* 浮层背景 */

  /* 文字系统 */
  --el-text-color-primary: var(--text-color) !important;
  --el-text-color-regular: #cbd5e1 !important; /* 次级文字 */
  --el-text-color-secondary: #94a3b8 !important; /* 三级文字 */
  
  /* 边框系统 */
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #475569 !important; /* 更浅边框 */
  --el-border-color-lighter: #64748b !important;

  /* 组件特定 */
  --el-button-bg-color: #1e40af !important;     /* 深蓝色按钮 */
  --el-input-bg-color: #1e293b !important;      /* 输入框背景 */
  --el-menu-bg-color: #0f172a !important;       /* 菜单背景 */
  --el-table-bg-color: #0f172a !important;      /* 表格背景 */
  --el-tag-bg-color: rgba(14, 165, 233, 0.15) !important; /* 半透明标签 */
  
  /* 状态颜色 */
  --el-color-success: #22c55e !important;       /* 鲜绿色 */
  --el-color-warning: #f59e0b !important;       /* 琥珀色 */
  --el-color-danger: #ef4444 !important;        /* 亮红色 */
  --el-color-info: #8b5cf6 !important;          /* 紫罗兰色 */
  
  /* 阴影效果 */
  --el-box-shadow-light: 0 4px 16px rgba(2, 132, 199, 0.2) !important; /* 蓝色调阴影 */
  --card-shadow: 0 4px 12px rgba(14, 165, 233, 0.15); /* 卡片发光效果 */

  /* 输入框系统 */
  --el-input-text-color: var(--text-color);
  --el-input-placeholder-color: #94a3b8;
  --el-input-hover-border-color: var(--el-color-primary-light-5);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-disabled-bg-color: #1e293b;

  /* 代码块 */
  --code-bg: #1e293b;
  --code-border: #334155;
}

/* 配套代码高亮主题 */
[data-theme="midnight"] {
  --hljs-text: #e2e8f0;
  --hljs-bg: #1e293b;
  --hljs-border: rgba(99, 102, 241, 0.2);
  --hljs-keyword: #818cf8;        /* 薰衣草紫 */
  --hljs-string: #0ea5e9;         /* 主色青蓝 */
  --hljs-number: #22d3ee;         /* 青色 */
  --hljs-comment: #94a3b8;        /* 灰蓝色 */
  --hljs-title: #67e8f9;          /* 亮青色 */
  --hljs-built_in: #c084fc;       /* 浅紫色 */
  --hljs-literal: #f472b6;        /* 粉红色 */
  --hljs-class: #38bdf8;          /* 浅青蓝 */
  --hljs-function: #60a5fa;       /* 钴蓝色 */
  --hljs-params: #a5f3fc;         /* 水青色 */
  --hljs-attr: #34d399;           /* 翡翠绿 */
}

/* 多巴胺主题 - 高饱和度愉悦配色 */
[data-theme="neon"] {
  /* 基础三色 */
  --bg-color: #1a0933;          /* 深紫罗兰背景（增强鲜艳色对比） */
  --text-color: #f0f0ff;        /* 柔光白文字 */
  --border-color: #6a45d1;      /* 霓虹紫边框 */

  /* 主色调 - 荧光粉 */
  --el-color-primary: #ff2d95;  /* 高饱和品红 */
  --el-color-primary-light-3: #ff5eaa;
  --el-color-primary-light-5: #ff8fc0;
  --el-color-primary-light-7: #ffc0d6;
  --el-color-primary-rgb: 255, 45, 149 !important;
  
  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #27104e !important;      /* 渐变紫色 */
  --el-bg-color-overlay: #351f63 !important;   /* 霓虹灯牌效果 */

  /* 文字系统 */
  --el-text-color-primary: var(--text-color) !important;
  --el-text-color-regular: #d6c2ff !important; /* 薰衣草紫 */
  --el-text-color-secondary: #a98fff !important; 

  /* 边框系统 */
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #8d6de9 !important; /* 亮紫色 */
  --el-border-color-lighter: #b9a0ff !important;

  /* 组件特定 */
  --el-button-bg-color: #ff2d95 !important;    /* 荧光粉按钮 */
  --el-input-bg-color: #2d1b5b !important;     /* 深紫晶背景 */
  --el-menu-bg-color: rgba(26, 9, 51, 0.85) !important;
  --el-table-bg-color: #1a0933 !important;
  --el-tag-bg-color: rgba(255, 45, 149, 0.2) !important;
  
  /* 多巴胺特色状态色 */
  --el-color-success: #39ff14 !important;     /* 荧光绿 */
  --el-color-warning: #ffde59 !important;      /* 柠檬黄 */
  --el-color-danger: #ff2a6d !important;       /* 电光粉 */
  --el-color-info: #05d9e8 !important;         /* 青蓝色 */
  
  /* 发光效果阴影 */
  --el-box-shadow-light: 0 0 15px rgba(255, 45, 149, 0.4), 
                         0 0 30px rgba(101, 0, 255, 0.3) !important;
  --card-shadow: 0 0 20px rgba(255, 45, 149, 0.3), 
                 0 0 40px rgba(101, 0, 255, 0.2);

  /* 输入框系统 */
  --el-input-text-color: #f0f0ff;
  --el-input-placeholder-color: #b9a0ff;
  --el-input-hover-border-color: #ff5eaa;
  --el-input-focus-border-color: #ff2d95;
  --el-input-disabled-bg-color: #2a1150;

  /* 代码块 */
  --code-bg: #2d1b5b;
  --code-border: #6a45d1;
}

/* 配套代码高亮主题 */
[data-theme="neon"] {
  --hljs-text: #f0f0ff;
  --hljs-bg: #2d1b5b;
  --hljs-border: rgba(106, 69, 209, 0.4);
  --hljs-keyword: #ff2d95;       /* 荧光粉 */
  --hljs-string: #39ff14;        /* 荧光绿 */
  --hljs-number: #ffde59;        /* 柠檬黄 */
  --hljs-comment: #b9a0ff;       /* 薰衣草紫 */
  --hljs-title: #05d9e8;         /* 青蓝 */
  --hljs-built_in: #ff2a6d;      /* 电光粉 */
  --hljs-literal: #ff8fc0;       /* 浅品红 */
  --hljs-class: #ff5eaa;         /* 主色渐变 */
  --hljs-function: #8d6de9;      /* 亮紫色 */
  --hljs-params: #ffde59;        /* 柠檬黄 */
  --hljs-attr: #05d9e8;          /* 青蓝 */
}

/* 棉花糖主题 */
[data-theme="marshmallow"] {
  /* 基础三要素 */
  --bg-color: #e6f7ff;         /* 极浅水蓝背景 */
  --text-color: #2e2a36;       /* 深紫灰色文字 */
  --border-color: #c2d6e3;     /* 浅灰蓝色边框 */

  /* 主色调 - 樱花粉 */
  --el-color-primary: #f5a5c3 !important;
  --el-color-primary-light-3: #f8bbd3;
  --el-color-primary-light-5: #fad1e1;
  --el-color-primary-light-7: #fde8f0;
  --el-color-primary-rgb: 245, 165, 195 !important;
  
  /* 辅助色 - 浅水蓝 */
  --el-color-info: #99d8e0 !important;
  --el-color-info-light-3: #b3e3e8;
  --el-color-info-light-5: #cceef0;
  
  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #d4f1f5 !important;      /* 更亮的水蓝 */
  --el-bg-color-overlay: #ffffff !important;   /* 纯白浮层 */

  /* 文字系统 */
  --el-text-color-primary: #3a2e4a !important;  /* 深紫罗兰 */
  --el-text-color-regular: #5a4e6a !important;
  --el-text-color-secondary: #8c7b99 !important;
  
  /* 边框系统 */
  --el-border-color: #e0c4d3 !important;       /* 浅粉灰 */
  --el-border-color-light: #f0dde6 !important;
  --el-border-color-lighter: #f8eef3 !important;

  /* 组件设计 */
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-input-bg-color: #ffffff !important;      /* 纯白输入框 */
  --el-menu-bg-color: #f9f2f5 !important;       /* 极浅粉背景 */
  --el-table-bg-color: #ffffff !important;
  --el-tag-bg-color: rgba(245, 165, 195, 0.15) !important;
  
  /* 状态颜色（增强对比） */
  --el-color-success: #8bd48d !important;       /* 薄荷绿 */
  --el-color-warning: #ffd166 !important;       /* 奶油黄 */
  --el-color-danger: #ff6b6b !important;        /* 珊瑚红 */
  
  /* 阴影效果 */
  --el-box-shadow-light: 0 4px 16px rgba(245, 165, 195, 0.2) !important;
  --card-shadow: 0 4px 12px rgba(153, 216, 224, 0.15); /* 水蓝阴影 */

  /* 输入框系统 */
  --el-input-text-color: #4a3b5a;
  --el-input-placeholder-color: #c0a4b8;
  --el-input-hover-border-color: var(--el-color-primary-light-3);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-disabled-bg-color: #f8f5fa;

  /* 代码块 */
  --code-bg: #ffffff;
  --code-border: #f0dde6;
}

/* 配套糖果色代码高亮 */
[data-theme="marshmallow"] {
  --hljs-text: #4a3b5a;
  --hljs-bg: #fff5f9;
  --hljs-border: #f8d7e6;
  --hljs-keyword: #f5a5c3;        /* 主色粉 */
  --hljs-string: #99d8e0;         /* 水蓝色 */
  --hljs-number: #ff9aa2;         /* 珊瑚粉 */
  --hljs-comment: #c0a4b8;        /* 灰紫色 */
  --hljs-title: #8bd48d;          /* 薄荷绿 */
  --hljs-built_in: #ffd166;       /* 奶油黄 */
  --hljs-literal: #ff6b6b;        /* 珊瑚红 */
  --hljs-class: #c9a2e0;          /* 淡紫色 */
  --hljs-function: #a5d8f5;       /* 浅天蓝 */
  --hljs-params: #7b8c9d;         /* 灰蓝色 */
  --hljs-attr: #76c893;           /* 翡翠绿 */
}


/* 沙漠主题 */
[data-theme="desert"] {
    /* 基础三色 */
    --bg-color: #f9f2e7;         /* 浅沙色背景 */
    --text-color: #5c3d2e;       /* 深棕色文字 */
    --border-color: #d7b98e;     /* 浅褐色边框 */
    
    /* 主色调 - 沙丘金/陶土橙 */
    --el-color-primary: #d98236; /* 陶土橙 */
    --el-color-primary-light-3: #e39e5d;
    --el-color-primary-light-5: #edba84;
    --el-color-primary-light-7: #f7d6ac;
    --el-color-primary-rgb: 217, 130, 54 !important;
    
    /* 背景系统 */
    --el-bg-color: var(--bg-color) !important;
    --el-bg-color-page: #f5e8c9 !important;      /* 浅沙色 */
    --el-bg-color-overlay: #f0e0b5 !important;   /* 稍深沙色 */
    
    /* 文字系统 */
    --el-text-color-primary: var(--text-color) !important;
    --el-text-color-regular: #7d5c3f !important; /* 次级文字 */
    --el-text-color-secondary: #9e7e5f !important; /* 三级文字 */
    
    /* 边框系统 */
    --el-border-color: var(--border-color) !important;
    --el-border-color-light: #c9a87c !important; /* 更浅边框 */
    --el-border-color-lighter: #bb9662 !important;
    
    /* 组件特定 */
    --el-button-bg-color: #d98236 !important;     /* 陶土橙按钮 */
    --el-input-bg-color: #f5e8c9 !important;      /* 输入框背景 */
    --el-menu-bg-color: #f0e0b5 !important;       /* 菜单背景 */
    --el-table-bg-color: #f9f2e7 !important;      /* 表格背景 */
    --el-tag-bg-color: rgba(217, 130, 54, 0.15) !important; /* 半透明标签 */
    
    /* 状态颜色 */
    --el-color-success: #8a9b52 !important;       /* 沙漠绿 */
    --el-color-warning: #e6a23c !important;       /* 琥珀色 */
    --el-color-danger: #c4564a !important;        /* 砖红色 */
    --el-color-info: #a87c52 !important;          /* 胡桃木色 */
    
    /* 阴影效果 */
    --el-box-shadow-light: 0 2px 10px rgba(217, 130, 54, 0.2) !important;
    --card-shadow: 0 4px 12px rgba(187, 150, 98, 0.15);
    
    /* 输入框系统 */
    --el-input-text-color: var(--text-color);
    --el-input-placeholder-color: #9e7e5f;
    --el-input-hover-border-color: var(--el-color-primary-light-3);
    --el-input-focus-border-color: var(--el-color-primary);
    --el-input-disabled-bg-color: #f0e0b5;
    
    /* 代码块 */
    --code-bg: #f5e8c9;
    --code-border: #d7b98e;
    
    /* 特殊装饰色 */
    --sunset-red: #c4564a;
    --sunset-orange: #e39e5d;
    --cactus-green: #8a9b52;
}

/* 沙漠主题代码高亮 */
[data-theme="desert"] {
    --hljs-text: #5c3d2e;
    --hljs-bg: #f5e8c9;
    --hljs-border: rgba(187, 150, 98, 0.3);
    --hljs-keyword: #c4564a;        /* 日落红 */
    --hljs-string: #8a9b52;         /* 仙人掌绿 */
    --hljs-number: #d98236;         /* 主色陶土橙 */
    --hljs-comment: #9e7e5f;        /* 胡桃木色 */
    --hljs-title: #a87c52;          /* 胡桃木深色 */
    --hljs-built_in: #bb9662;      /* 沙丘金 */
    --hljs-literal: #e39e5d;        /* 日落橙 */
    --hljs-class: #d98236;          /* 主色 */
    --hljs-function: #bb9662;       /* 沙丘金 */
    --hljs-params: #7d5c3f;         /* 深棕色 */
    --hljs-attr: #8a9b52;           /* 沙漠绿 */
}

:root {
    /* 水墨风基础变量 */
    --ink-primary: #2c3e50;        /* 墨黑 */
    --ink-secondary: #5d6d7e;      /* 灰墨 */
    --ink-accent: #7f8c8d;          /* 淡墨 */
    --ink-light: #ecf0f1;           /* 宣纸白 */
    --ink-highlight: #3498db;       /* 青花点缀 */
    --ink-danger: #e74c3c;         /* 朱砂红 */
    --ink-success: #27ae60;        /* 竹青 */
    --ink-warning: #f39c12;        /* 琥珀黄 */
    
    /* 背景纹理 */
    --ink-bg-texture: linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
}

[data-theme="ink"] {
    /* 基础三色 */
    --bg-color: #f5f7fa;             /* 宣纸白背景 */
    --text-color: #2c3e50;           /* 墨黑色文字 */
    --border-color: #d5dbdb;         /* 淡墨灰边框 */
    
    /* 主色调 - 墨黑渐变 */
    --el-color-primary: var(--ink-primary);
    --el-color-primary-light-3: #3d566e;
    --el-color-primary-light-5: #4f6a85;
    --el-color-primary-light-7: #6b839d;
    --el-color-primary-rgb: 44, 62, 80 !important;
    
    /* 背景系统 */
    --el-bg-color: var(--bg-color) !important;
    --el-bg-color-page: #eef2f6 !important;       /* 宣纸纹理背景 */
    --el-bg-color-overlay: #ffffff !important;    /* 浮层背景 */
    background-image: var(--ink-bg-texture);
    background-size: 20px 20px;
    
    /* 文字系统 */
    --el-text-color-primary: var(--text-color) !important;
    --el-text-color-regular: #5d6d7e !important;   /* 灰墨色 */
    --el-text-color-secondary: #7f8c8d !important; /* 淡墨色 */
    
    /* 边框系统 */
    --el-border-color: var(--border-color) !important;
    --el-border-color-light: #c5cdd3 !important;   /* 更淡墨色 */
    --el-border-color-lighter: #e1e4e8 !important;
    
    /* 组件特定 */
    --el-button-bg-color: #ffffff !important;      /* 宣纸白按钮 */
    --el-input-bg-color: #ffffff !important;       /* 输入框背景 */
    --el-menu-bg-color: #f5f7fa !important;       /* 菜单背景 */
    --el-table-bg-color: #ffffff !important;       /* 表格背景 */
    --el-tag-bg-color: rgba(44, 62, 80, 0.1) !important; /* 半透明标签 */
    
    /* 状态颜色 */
    --el-color-success: var(--ink-success) !important;     /* 竹青色 */
    --el-color-warning: var(--ink-warning) !important;     /* 琥珀色 */
    --el-color-danger: var(--ink-danger) !important;       /* 朱砂红 */
    --el-color-info: var(--ink-highlight) !important;      /* 青花色 */
    
    /* 阴影效果 */
    --el-box-shadow-light: 0 2px 8px rgba(44, 62, 80, 0.1) !important; 
    --card-shadow: 0 4px 12px rgba(44, 62, 80, 0.08); 
    
    /* 输入框系统 */
    --el-input-text-color: var(--text-color);
    --el-input-placeholder-color: #a6b1be;
    --el-input-hover-border-color: var(--el-color-primary-light-5);
    --el-input-focus-border-color: var(--el-color-primary);
    --el-input-disabled-bg-color: #f0f3f7;
    
    /* 代码块 */
    --code-bg: #ffffff;
    --code-border: #e1e4e8;
    
    /* 水墨特色元素 */
    --ink-brush-stroke: linear-gradient(to right, 
        transparent 0%, 
        rgba(44, 62, 80, 0.2) 30%, 
        rgba(44, 62, 80, 0.5) 50%, 
        rgba(44, 62, 80, 0.2) 70%, 
        transparent 100%);
}

/* 配套代码高亮主题 */
[data-theme="ink-wash"] {
    --hljs-text: var(--text-color);
    --hljs-bg: #ffffff;
    --hljs-border: rgba(52, 152, 219, 0.1);
    --hljs-keyword: #8e44ad;        /* 紫藤色 */
    --hljs-string: var(--ink-danger); /* 朱砂红 */
    --hljs-number: var(--ink-success); /* 竹青色 */
    --hljs-comment: #95a5a6;        /* 烟灰色 */
    --hljs-title: var(--ink-highlight); /* 青花色 */
    --hljs-built_in: var(--ink-primary); /* 墨黑色 */
    --hljs-literal: var(--ink-warning); /* 琥珀色 */
    --hljs-class: #16a085;          /* 碧玉色 */
    --hljs-function: #2980b9;       /* 靛青色 */
    --hljs-params: #d35400;         /* 赭石色 */
    --hljs-attr: #27ae60;           /* 竹青色 */
}


/* 修改默认按钮基础样式 */
.el-button--default {
  /* 通用样式 */
  background-color: var(--bg-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;

  /* 悬停状态 */
  &:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--hover-border) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  /* 激活状态 */
  &:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* 禁用状态 */
  &.is-disabled {
    opacity: 0.6;
    filter: grayscale(0.3);
  }

  /* 图标样式 */
  .el-icon {
    transition: transform 0.2s;
    font-size: 18px;
  }

  &:hover .el-icon {
    transform: scale(1.1);
  }
}

.el-input-group__append, .el-input-group__prepend {
  border: none;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
body {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: 
    background-color var(--transition-duration) var(--transition-function),
    color var(--transition-duration) var(--transition-function);
  margin: 0;
  font-family: var(--el-font-family);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 按钮 */
.el-button {
  transition: all var(--transition-duration) !important;
}

.sidebar {
  background: var(--bg-color) !important;
  border-right-color: var(--border-color) !important;
}

.el-menu {
--el-menu-bg-color: var(--bg-color);
--el-menu-text-color: var(--text-color);
--el-menu-hover-bg-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
--el-menu-active-color: var(--primary-color);
}

.el-menu-item {
  background-color: var(--el-bg-color-page)!important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-menu-item:hover {
  background: var(--el-menu-hover-bg-color) !important;
  transform: translateX(4px);
}

/* 输入系统全局适配 */
.el-input {
--el-input-bg-color: var(--bg-color)!important;
--el-input-text-color: var(--text-color)!important;
}

.el-input__inner {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  
  &::placeholder {
    color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  }
}

.el-textarea {
--el-input-bg-color: var(--bg-color)!important;
--el-input-text-color: var(--text-color)!important;
}
.el-textarea__inner {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;

  &::placeholder {
    color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  }
}

/* 下拉菜单适配 */
.el-select {
  --el-select-input-focus-border-color: var(--primary-color)!important;

.el-select__wrapper {
  background: var(--bg-color) !important;
  box-shadow: 0 0 0 1px var(--border-color) !important;
  
  &:hover {
  box-shadow: 0 0 0 1px var(--primary-color) !important;
  }
  
  .el-select__placeholder {
  color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  }
}
}
/* 下拉菜单内部适配 */
.el-select-dropdown {
  --el-select-dropdown-border-color: var(--border-color)!important;
  --el-select-dropdown-bg-color: var(--bg-color)!important;
  --el-select-dropdown-text-color: var(--text-color)!important;
  --el-select-dropdown-hover-bg-color: color-mix(in srgb, var(--primary-color) 15%, transparent)!important;
  --el-select-dropdown-active-bg-color: var(--primary-color)!important;
}

.el-option {
  &__content {
  background: var(--el-bg-color) !important;
  color: var(--el-text-color) !important;
  }

  &__is-active {
  background: var(--el-primary-color) !important;
  color: var(--bg-color) !important;
  }
}

.el-option-group__title {
  color: var(--text-color) !important;
}

.el-option-group__label {
  color: var(--text-color) !important;
}

.el-option-group__options {
  .el-option {
  &__content {
    color: var(--text-color) !important;
  }

  &__is-active {
    color: var(--el-bg-color) !important;
  }
  }
}

.el-alert {
  --el-alert-bg-color: var(--bg-color) !important;
  --el-alert-text-color: var(--text-color) !important;
}

/* 开关控件适配 */
.el-switch {
--el-switch-on-color: var(--primary-color);
--el-switch-off-color: var(--border-color);
}

/* 弹窗适配 */
.el-dialog {


  background: var(--bg-color) !important;
  border: 1px solid var(--border-color) !important;

  .el-dialog__header {
    border-bottom: 1px solid var(--border-color) !important;
  }

  .el-dialog__title {
    color: var(--text-color) !important;
  }
}

.knowledge-dialog-content {
    /* 隐藏横向滚动条 */
  overflow-x: hidden;
  
}

/* 滑动条深度适配 */
.el-slider {
--el-slider-main-bg-color: var(--primary-color);
--el-slider-runway-bg-color: color-mix(in srgb, var(--border-color) 30%, transparent);

.el-slider__button {
  border-color: var(--primary-color) !important;
  background: var(--bg-color) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
}
/* 表格 */
.el-table {
  --el-table-header-bg-color: var(--el-bg-color-page);
  --el-table-tr-bg-color: var(--el-bg-color);
  --el-table-border-color: var(--el-border-color);
}
/* 代码块 */
.code-block {
  background-color: var(--code-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
}
[data-theme="light"] {
  /* 基础三要素 */
  --hljs-text: #24292e; 
  --hljs-bg: #f6f8fa;
  --hljs-border: rgba(27,31,36,0.15);
  /* 核心语法 */
  --hljs-keyword: #d73a49;      
  --hljs-string: #032f62;      
  --hljs-number: #005cc5;      
  --hljs-comment: #6a737d;   
  /* 结构类元素 */
  --hljs-title: #2f6f9d;        
  --hljs-built_in: #6f42c1;    
  --hljs-literal: #cf222e;       
  --hljs-class: #8250df;         
  --hljs-function: #6639ba;    
  /* 辅助元素 */
  --hljs-params: #24292e;       
  --hljs-attr: #116329;        
}
/* 深色模式覆盖 */
[data-theme="dark"] {
  --hljs-text: #e1e4e8;
  --hljs-bg: #2d333b;
  --hljs-border: rgba(205,217,229,0.1);
  --hljs-keyword: #ff7b72;
  --hljs-string: #79c0ff;
  --hljs-number: #79c0ff;
  --hljs-comment: #8b949e;
  --hljs-title: #a5d6ff;
  --hljs-built_in: #d2a8ff;
  --hljs-literal: #ffa198;
  --hljs-class: #d2a8ff;
  --hljs-function: #d2a8ff;
  --hljs-params: #e1e4e8;
  --hljs-attr: #7ee787;
}
.hljs {
  color: var(--hljs-text) !important;
  background: var(--code-bg-color) !important; /* 与主题色一致 */
  padding: 1em !important;
  border-radius: 8px; /* 添加圆角 */
  transition: color 0.3s;
}

.hljs .hljs-comment,
.hljs .hljs-quote {
  color: var(--hljs-comment);
}

.hljs .hljs-keyword,
.hljs .hljs-selector-tag,
.hljs .hljs-subst {
  color: var(--hljs-keyword);
}

.hljs .hljs-number,
.hljs .hljs-literal,
.hljs .hljs-variable,
.hljs .hljs-template-variable,
.hljs .hljs-tag .hljs-attr {
  color: var(--hljs-number);
}

.hljs .hljs-string,
.hljs .hljs-doctag {
  color: var(--hljs-string);
}

.hljs .hljs-title,
.hljs .hljs-section {
  color: var(--hljs-title);
}

.hljs .hljs-subst {
  font-weight: normal;
}

.hljs .hljs-type,
.hljs .hljs-class .hljs-title {
  color: var(--hljs-built_in);
}

.hljs .hljs-attribute,
.hljs .hljs-name,
.hljs .hljs-tag {
  color: var(--hljs-attr);
}

.hljs .hljs-symbol,
.hljs .hljs-bullet,
.hljs .hljs-link {
  color: var(--hljs-literal);
}

.hljs .hljs-regexp,
.hljs .hljs-meta .hljs-keyword,
.hljs .hljs-selector-attr, .hljs .hljs-selector-pseudo {
  color: var(--hljs-function);
}

.hljs .hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs .hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs .hljs-link {
  text-decoration: underline;
}

.hljs .hljs-emphasis {
  font-style: italic;
}

/* 文件列表 */
.compact-file-item {
  background-color: var(--file-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
}
/* 卡片系统 */
.provider-card {
  background-color: var(--card-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}
/* 切换按钮 */
.el-switch__core {
  background-color: var(--el-border-color) !important;
  border-color: var(--el-border-color) !important;
}
.el-switch.is-checked .el-switch__core {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  background-color: var(--el-bg-color-page);
}
::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color);
  border-radius: 3px;
}
/* Markdown内容 */
.markdown-body {
  color: var(--el-text-color-primary) !important;
}
.markdown-body table {
  background-color: transparent !important;
  border-color: var(--el-border-color) !important;
  color: var(--text-color);
}
.markdown-body table th {
  background-color: var(--el-color-primary) !important;
  color: var(--el-text-color) !important;
}
.markdown-body table td {
  background-color: var(--el-table-bg-color) !important;
  color: var(--el-text-color-primary) !important;
}
.markdown-body blockquote {
  border-left-color: var(--el-border-color) !important;
}
.markdown-body hr {
  border-color: var(--el-border-color) !important;
}
.markdown-body code {
  background-color: var(--code-bg-color) !important;
  color: var(--code-text-color) !important;
}
.markdown-body th {
  background-color: var(--el-color-primary-light-9) !important;
}
/* 状态标签 */
.el-tag {
  background-color: var(--el-tag-bg-color) !important;
  border-color: var(--el-color-primary-light-7) !important;
}
/* 加载动画 */
.loading-spinner {
  color: var(--el-color-primary) !important;
}
/* 工具提示 */
.el-tooltip__popper {
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}



/* 顶部栏样式 */
.top-bar {
  background-color: var(--el-bg-color-page);
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -webkit-app-region: drag;
}

.window-controls {
  display: flex;
  gap: 4px;
  -webkit-app-region: no-drag;
}

.top-bar-btn {
  height: 24px;
  width: 24px;
  padding: 0;
  color: var(--el-text-color) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-bar-btn .el-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.top-bar-btn:hover {
  background-color: var(--el-color-primary-light-3) !important;
}

/* 主容器样式 */
.main-container {
  flex: 1;
  overflow: hidden;
}

.el-aside {
  background-color: var(--el-bg-color-page)!important;
}


/* 侧边栏样式 */
.sidebar {
  background-color: var(--el-bg-color-page) !important;
  border-right: 1px solid var(--el-border-color-light);
  transition: width 0.3s;
  height: 100%;
  overflow: hidden;
  width: 200px;
}

.el-menu-vertical {
  border-right: none !important;
  overflow: hidden;
  width: 100% !important;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

/* 内容区样式 */
.content {
  padding: 20px;
  overflow-y: scroll; /* 强制显示滚动条，以便我们可以隐藏它 */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  background-color: var(--el-bg-color-page);
}

.content::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* 聊天容器样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 12px var(--el-box-shadow-light);
  scrollbar-width: 2px;
  overflow-y: auto;
}

/* 修复消息容器布局 */
.message {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

/* 修复用户消息换行问题 */
.message.user {
  align-items: flex-end; /* 原设置正确，但需要配合子元素宽度 */
}

.message.assistant {
  align-items: flex-start;
}

/* 消息内容基础样式 */
.user-message-content {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.user .message-content {
  background-color: var(--el-color-primary)!important;
  color: #ffffff;
  border-radius: 12px 12px 0 12px;
}

.system .message-content {
  background-color: var(--el-bg-color-page);
  border: 1px solid var(--el-border-color-light);
  color: var(--el-color-info) !important; /* 增加文字颜色定义 */
  border-radius: 12px;
  padding: 5px;
}

.assistant .message-content {
  background-color: var(--el-bg-color-page);
  border: 1px solid var(--el-border-color-light);
  color: var(--el-text-color-primary) !important; /* 增加文字颜色定义 */
  border-radius: 12px 12px 12px 0;
}

/* 增强AI消息样式 */
.assistant-message-content {
  max-width: 85%;
  width: fit-content; /* 确保动态宽度 */
  white-space: pre-line;
}

.assistant .message-content > :first-child {
  margin-top: 0;
}

.assistant .message-content > :last-child {
  margin-bottom: 0;
}

/* 添加Markdown正文样式 */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--el-text-color-primary) !important;
  padding: 16px;
}

.markdown-body p {
  margin: 0.8em 0;
}

.markdown-body pre {
  margin: 1em 0;
  overflow: auto;
}

.button-group {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .button-group {
    row-gap: 8px; /* 行间距 */
    column-gap: 6px; /* 列间距 */
  }
  
  .button-group .el-button {
    flex-shrink: 0; /* 防止按钮缩小 */
    margin: 2px !important; /* 覆盖可能存在的边距 */
  }
}


/* 打字指示器样式 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: var(--el-bg-color);
  border-radius: 50%;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* 设置表单样式 */
.settings-form {
  max-width: 800px;
  margin: 40px auto;
  padding: 32px;
  background-color: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--el-box-shadow-light);
}

.el-form-item {
  margin-bottom: 32px;
}

.full-width-input {
  box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.2);
  width: 100%;
}

.full-width-input .el-input__wrapper {
  padding: 8px 16px;
  height: 48px;
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
  transition: all 0.3s ease;
}

.full-width-input .el-input__wrapper:hover {
  box-shadow: 0 4px 12px var(--el-box-shadow-light);
}

.full-width-input .el-input__wrapper.is-focus {
  box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.3);
}

.full-width-input .el-input__inner {
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .settings-form {
    max-width: 100%;
    margin: 20px;
    padding: 24px;
  }
  
  .full-width-input .el-input__wrapper {
    height: 44px;
  }
}

.settings-form {
  display: flex;
  flex-direction: column;
}

.form-item-align {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右两端对齐 */
}

.el-form-item__label, .el-form-item__content {
  text-align: center; /* 标签文字左对齐 */
}

/* 确保输入控件宽度合适 */
.full-width-input {
  width: 100%;
}

/* 可选：为了让所有标签的横向中心点对齐，可以给标签设定固定的宽度 */
.el-form-item__label {
  width: auto;
  display: inline-block;
  text-align: center;
}


.api-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.api-endpoint {
  margin-bottom: 30px;
}

/* 添加表格样式 */
.model-table {
  margin-top: 20px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  
  .el-table__header th {
    background-color: var(--el-fill-color-light);
  }
}

.loading-models, .error-models {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--el-color-warning);
}

.error-models {
  color: var(--el-color-danger);
}

.copyable {
  cursor: pointer;
  color: #409eff;
  transition: color 0.3s;
}
.copyable:hover {
  color: #79bbff;
}

.notification {
  position: fixed;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  font-family: system-ui;
  font-size: 14px;
}
.notification.show {
  top: 24px;
  opacity: 1;
}
.notification.hide {
  top: 10px;
  opacity: 0;
}

.notification.error {
  background: #ff5252;
}

/* 工具界面样式 */
.tool-item {
  border: 1px solid var(--bg-color);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tool-content {
  margin-top: 16px;
  padding-left: 24px;
  border-left: 2px solid var(--el-color-primary)
}

.tool-item:hover {
  box-shadow: 0 2px 12px var(--el-box-shadow-light);
}

/* 拖拽/点击区域样式 */
.drop-zone {
  border: 2px dashed rgba(var(--el-color-primary-rgb), 0.2);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  margin: 5% auto;
  width: 80%;
  background-color: var(--el-bg-color-page)
}

.drop-zone:hover {
  border-color: var(--border-color);
  background-color: var(--el-bg-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(64,158,255,.1);
}

.drop-zone p {
  margin-top: 15px;
  color: #606266;
  font-size: 14px;
}

.el-popper__arrow {
  border-color: var(--border-color) !important;
}
.el-popper__arrow::before{
  background-color: var(--el-bg-color)!important;
}
.el-popper{
  background-color: var(--el-bg-color)!important;
  color: var(--el-text-color)!important;
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

/* 更新css/styles.css */
/* 紧凑型文件列表 */
.compact-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  max-height: 72px;
  overflow-y: scroll;
  padding: 8px 0;
}
/* 不显示滚动条 */
.compact-file-list::-webkit-scrollbar {
  display: none;
}

.compact-file-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #f0f4ff;
  border-radius: 12px;
  padding: 4px 36px 4px 12px; /* 增加右侧padding */
  max-width: 240px;
  transition: all 0.2s;
  overflow-y: scroll;
}
/* 不显示滚动条 */
.compact-file-item::-webkit-scrollbar {
  display: none;
}

.file-name {
  color: #409eff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-icon {
  background-color: transparent !important;/* 透明 */
  border: none !important; /* 去掉边框 */
  position: absolute;
  right: 0px; /* 增加右侧间距 */
  top: 50%;
  transform: translateY(-50%);
  padding: 3px !important;
  width: 10px; /* 缩小尺寸 */
  height: 10px;
}
.delete-icon .el-icon {
  font-size: 12px; /* 缩小图标 */
}
/* 调整hover状态 */
.delete-icon:hover {
  color: var(--el-color-danger) !important;
  transform: translateY(-50%) scale(1.1);
}

.compact-file-item:hover {
  background: #e6f1ff;
  box-shadow: 0 2px 6px rgba(64,158,255,0.1);
}

/* 文件链接样式 */
.file-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* 单个文件链接 */
.file-link {
  display: inline-flex;
  align-items: center;
  background: #f0f4ff;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 13px;
  color: #409eff;
  text-decoration: none;
  transition: all 0.2s;
  max-width: 240px;
  white-space: nowrap; /* 禁止链接文字换行 */
  overflow: hidden;
}

.file-link:hover {
  background: #e1e9ff;
  color: #337ecc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Markdown表格样式 */
.markdown-body table {
  width: 100% !important; /* 强制继承父级宽度 */
  min-width: 100%; /* 防止内容不足时收缩 */
  display: table; /* 恢复表格特性 */
  box-shadow: none; /* 移除阴影避免视觉干扰 */
}


.markdown-body th, 
.markdown-body td {
  padding: 12px 15px;
  border: 1px solid var(--el-border-color-light);
}

.markdown-body th {
  background-color: var(--el-color-primary-light-9);
  font-weight: 600;
}

.markdown-body tr:nth-child(even) {
  background-color: var(--el-fill-color-lighter);
}

/* 代码块样式 */
.code-block {
  position: relative;
  margin: 1em 0;
  border-radius: 8px;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--el-color-primary);
  color: var(--el-text-color);
  border-radius: 8px 8px 0 0;
}

.code-lang {
  color: var(--el-text-color);
  font-size: 0.9em;
  font-family: var(--el-font-family);
  margin-right: auto;
}

/* 设置按钮组的样式 */
.code-actions {
  display: flex;
  gap: 5px; /* 按钮之间的间距 */
}

.copy-button, .preview-button{
  background: var(--el-bg-color-page);
  border: none;
  color: var(--el-color-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}
.copy-button:hover, .preview-button:hover {
  background: var(--code-bg-color);
}

.copy-button, .download-button{
  background: var(--el-bg-color-page);
  border: none;
  color: var(--el-color-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}
.copy-button:hover, .download-button:hover {
  background: var(--code-bg-color);
}

/* 在样式表中添加覆盖规则 */
.code-block pre {
  background-color: transparent !important;
  padding: 0;
}


/* 钥匙箱主容器 */
.keybox-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--bg-color);
  min-height: calc(100vh - 64px); /* 根据导航栏高度调整 */
  box-shadow: var(--el-box-shadow-light);
  border-radius: 8px;
}
/* 网格布局系统 */
.provider-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: 0;
  margin: 0 -0.75rem; /* 抵消卡片边距 */
}
/* 磁贴卡片系统 */
.provider-card {
  --card-border: 1px solid #e2e8f0;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.05);
  
  position: relative;
  background: #ffffff;
  border: var(--card-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  margin: 0.75rem;
  box-shadow: var(--card-shadow);
}
.provider-card:hover {
  --card-border: 1px solid #cbd5e1;
  --card-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  position: relative;
}
.vendor-tag {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
}
/* 卡片操作按钮组 */
/* 调整卡片操作按钮组样式 */
.card-actions {
  display: flex;
  gap: 0.5rem;
  position: relative; /* 改为相对定位 */
  top: 0;
  right: 0;
  background: transparent; /* 去掉背景色 */
  padding: 0;
  box-shadow: none; /* 去掉阴影 */
}

/* 调整输入框容器布局 */
.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem; /* 增加上边距 */
}

/* 确保输入框可见 */
.el-input {
  width: 100%;
  min-width: 100%; /* 防止收缩 */
}

/* 调整模型选择容器 */
.model-container {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 确保选择框宽度 */
.model-select {
  flex: 1;
  min-width: 120px;
}

/* 添加新卡片 */
.add-tile {
  --dash-color: #cbd5e1;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px dashed var(--dash-color);
  background-color: rgba(248,250,252,0.5);
  transition: all 0.2s ease;
}
.add-tile:hover {
  --dash-color: #94a3b8;
  background-color: rgba(241,245,249,0.8);
  transform: scale(0.98);
}
.add-tile .el-icon {
  transition: transform 0.2s ease;
}
.add-tile:hover .el-icon {
  transform: scale(1.1);
}
/* 对话框增强样式 */
.el-dialog__header {
  border-bottom: 1px solid var(--el-button-bg-color);
  margin-bottom: 1rem;
}
.el-form-item {
  margin-bottom: 1.25rem;
}
.el-form-item__label {
  font-weight: 500;
  color: #475569;
  padding-bottom: 0.375rem !important;
}

.el-select__popper {
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}

/* 选项文字颜色和hover背景 */
.el-select-dropdown__item {
  color: var(--el-text-color-primary) !important;
  &:hover {
    background-color: var(--el-color-primary-light-3) !important;
  }
  &:is-selected{
    background-color: var(--el-color-primary-light-3) !important;
  }
}

/* 禁用状态的选项 */
.el-select-dropdown__item.is-disabled {
  color: var(--el-text-color-placeholder) !important;
}


/* 供应商选项样式 */
.provider-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.vendor-tag {
  background: var(--el-color-info);
  color: var(--el-text-color-regular);
  padding: 0 6px;        /* 去掉上下 padding */
  border-radius: 3px;    /* 微调圆角更匹配小尺寸 */
  font-size: 12px;
  line-height: 16px;     /* 控制垂直居中 */
  display: inline-block; /* 确保 line-height 生效 */
}

.model-id {
  color: var(--el-text-color-secondary);
  font-size: 12px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generate-btn {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid var(--card-bg-color);
}


/* 添加这些样式 */
.alert-content {
  line-height: 1.8;
  color: var(--el-color-info); /* 保持与警告组件颜色一致 */
}
.font-medium {
  font-weight: 500;
}
.el-link {
  vertical-align: baseline; /* 保持文字对齐 */
}
.el-link:hover {
  text-decoration: underline !important; /* 悬停时显示下划线 */
}

/* 知识库磁贴样式 */
.knowledge-card {
  min-height: 160px;
}

.knowledge-card h3 {
  margin-top: 10px;
  font-size: 1.2em;
}

/* 在 css/styles.css 中添加 */
.loading-spinner {
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.processing-message {
  text-align: center;
  padding: 20px;
  color: var(--el-color-info);
}

/* 添加样式 */
.kb-content {
  padding: 12px;
  height: calc(100% - 40px); /* 留出头部空间 */
}

.kb-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.kb-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-description {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-meta {
  border-top: 1px solid var(--el-border-color);
  padding-top: 8px;
  margin-top: 12px;
}

.kb-meta-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin: 4px 0;
}

.kb-icon {
  font-size: 14px;
  margin-right: 6px;
  color: var(--el-text-color-secondary);
}


.el-collapse {
  border: none;
  color: var(--el-text-color-primary)!important;
  background-color: var(--el-bg-color)!important;
}

/* 添加样式 */
.advanced-settings {
  --el-collapse-header-height: 48px;
  .el-collapse-item {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    
    &.is-active {
      box-shadow: 0 2px 12px var(--el-box-shadow);
    }
  }
  .el-collapse-item__content{
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
 }
  .el-collapse-item__header {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    padding: 0 16px;
    font-size: 14px;
  }
  
  .el-slider__button {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    border-color: var(--el-color-primary)!important;
  }

  .el-form-item {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    margin-bottom: 8px;
  }
}


.collapse-title {
  display: flex;
  align-items: center;
  color: var(--el-color-primary);
  
  .el-icon {
    transition: transform 0.2s;
  }
}

/* 激活状态旋转图标 */
.el-collapse-item.is-active .collapse-title .el-icon {
  transform: rotate(90deg);
}

.knowledge-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.knowledge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-color);
  border-radius: 8px;
  transition: all 0.2s;
}

.knowledge-item:hover {
  background: var(--el-border-color-light);
}

.knowledge-info {
  flex: 1;
}

.knowledge-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.knowledge-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.empty-tip {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 20px;
}
.empty-tip a {
  color: var(--el-text-color-primary);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.2s;
}
.empty-tip a:hover {
  color: var(--el-color-primary);
  text-decoration: underline;
}
.browser-mode-btn-container {
  text-align: center;
  margin-top: 20px;
}

.browser-mode-btn {
  width: 90%;
  max-width: 300px;
  text-align: center;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, var(--el-color-primary), var(--el-color-primary-light-3));
  box-shadow: 0 4px 12px var(--el-color-primary-light-9);
  border: none;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--el-color-primary-light-9);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.browser-mode-btn span {
  color: #fff;
}

.tip-text {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 8px;
}


.user-message-content div {
  white-space: pre-wrap;
}

.form-item-align .el-switch {
  margin-left: auto;
}

/* MCP服务器磁贴样式 */

.mcp-container .kb-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px;
}

.mcp-container .kb-switch {
  position: absolute;
  left: 12px;
  top: 12px;
}

.mcp-container .card-actions {
  position: absolute;
  right: 12px;
  top: 12px;
}

.mcp-container .kb-meta {
  border-top: 1px solid var(--el-border-color-light);
  padding-top: 12px;
  margin-top: 12px;
}

.mcp-container .kb-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.mcp-container .kb-meta-item .el-switch {
  margin-left: auto;
}

.mcp-container .el-tag--info {
  background-color: rgba(var(--el-color-primary-rgb), 0.1);
  border-color: rgba(var(--el-color-primary-rgb), 0.2);
  color: var(--el-color-primary);
}

/* 侧边栏Logo样式 */
.sidebar-logo {
  /* 侧边栏最底部 */
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: left;
  background-color: var(--el-bg-color);
}


.logo-icon img {
  width: 24px;
  height: 24px;
  border: none;
  vertical-align: middle;
  bottom: 0;
}

/* 开源声明页面 */
.logo-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.license-notice {
  background: var(--el-bg-color-page);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 16px var(--el-box-shadow-light);
}

.notice-section {
  border-left: 4px solid var(--el-color-warning);
  padding-left: 1rem;
  margin: 2rem 0;
}

.warning-text {
  color: var(--el-color-warning);
  font-size: 16px;
  line-height: 1.8;
}

.warning-text-en {
  color: var(--el-color-warning-light-3);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.contact-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
}

.contact-section h3 {
  color: var(--el-color-primary);
  margin-bottom: 1rem;
}

.contact-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.contact-link {
  color: var(--el-color-primary);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-link:hover {
  color: var(--el-color-primary-light-3);
  text-decoration: underline;
}

.social-links {
  margin-top: 2rem;
}

.link-item {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--el-bg-color);
  border-radius: 8px;
  transition: transform 0.3s;
}

.link-item:hover {
  transform: translateX(10px);
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
}

.link-item .el-icon {
  font-size: 24px;
  margin-right: 1rem;
  color: var(--el-color-primary-light-3);
}

.social-link {
  color: var(--el-color-primary-light-3);
  margin-left: 0.5rem;
  text-decoration: none;
}

.qq-group {
  color: var(--el-color-primary-light-3);
  font-weight: 500;
  margin-left: 0.5rem;
}

.agreement-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--el-border-color-light);
  text-align: center;
}

.agreement-link {
  color: var(--el-color-info);
  text-decoration: none;
  font-weight: 500;
}

.agreement-link:hover {
  text-decoration: underline;
}

.agent-prompt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  color: var(--el-color-info);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  max-height: 4.8em; /* 4 lines */
}

.agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: large;
  color: var(--text-color);
  margin: 8px;
}
.agent-id {
  font-family: monospace;
  user-select: all;
}

.agent-config-tabs {
  margin: 25px;
}

.agent-config-tabs .el-tabs__content {
  max-height: 400px;
  overflow-y: auto;
}

.preview-container {
  position: relative;
  width: 100%;
  min-height: 200px;
  max-height: 80vh;
  overflow: auto;
  background: var(--preview-bg-color);
  border-radius: 4px;
  margin: 10px 0;
  transition: all 0.3s ease;
}
.preview-container.loading {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--preview-bg-color);
}
.mermaid-diagram {
  padding: 20px;
  text-align: center;
}
/* 隐藏原始代码内容 */
.code-content[style*="display: none"] {
  display: none !important;
}

/* 更新按钮容器样式 */
.top-bar-btn.update-btn {
  /* 保持原有基本样式 */
  width: auto;
  padding: 4px 12px !important; /* 增加水平内边距 */
  display: inline-flex; /* 确保按钮依据内容调整大小 */
  white-space: nowrap; /* 防止文字换行 */
  transition: all 0.2s ease;
}
/* 更新按钮图标样式 */
.update-btn .el-icon {
  margin-right: 8px !important; /* 增加图标右边距 */
  flex-shrink: 0; /* 防止图标被压缩 */
}
/* 成功状态按钮 */
.update-btn.success {
  background-color: var(--el-color-success) !important;
  padding: 4px 12px !important;
}

.extra-params {
  .param-row {
    display: flex;
    align-items: center; /* Vertically center content */
    gap: 10px;        /* Space between elements */
    margin-bottom: 10px; /* Space between rows */

    .param-input,
    .type-select,
    .value-input,
    .remove-btn {
      flex: 1; /* Equal distribution of space */
      min-width: 0;  /* Important for flexbox to shrink items */
    }

    .value-input {
      align-items: center; /* 保持垂直居中 */
      justify-content: center; /* 水平居中 */

      > * { 
        flex: 1; 
        min-width: 0; 
      }

      .el-input-number {
        width: auto;
      }

      .el-switch {
        /* 水平居中 */
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

    .remove-btn {
      flex: 0 0 auto; /* Don't grow, don't shrink, automatic width */
      width: auto;     /* Let the button's content determine its width */
    }
  }
}

.memo-extra-params {
  .param-row {
    margin-bottom: 16px;
    
    .param-name-input {
      margin-bottom: 8px;
    }

    .param-value-input {
      margin-bottom: 8px;
      
      textarea {
        min-height: 80px;
        resize: vertical;
      }
    }

    .action-row {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      
      .el-button {
        margin-left: 0;
      }
    }
  }
}

.remove-btn {
  margin-left: auto;
}
.param-header {
    display: flex; /* 使用 flexbox */
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中对齐 */
    background-color: var(--el-bg-color-page); /* 背景颜色 */
    padding: 10px; /* 内边距 */
    margin-bottom: 20px; /* 底部外边距 */
    border: 2px solid var(--card-border);
    box-shadow: 2px 2px 5px var(--card-shadow); /* 阴影效果 */
    border-radius: 8px; /* 圆角 */
}

.action-row {
    display: flex;
    justify-content: flex-end; /* 按钮靠右对齐 */
    gap: 8px; /* 按钮之间的间距 */
}

.param-header span {
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    color: var(--el-text-color);
}
.message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.message:hover .message-actions {
  opacity: 1;
}
.copy-btn {
  padding: 4px !important;
  font-size: 12px !important;
}
.copy-btn i {
  font-size: 12px;
}

.tool-card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.el-input.mini-input {
  width: auto;
  height: auto;
}

/* 新版侧边导航样式 */
.agent-suite-container {
  height: calc(100vh - 60px);
}

.deploy-container {
  height: calc(100vh - 60px);
}

.storage-container {
  height: calc(100vh - 60px);
}

.suite-layout {
  display: flex;
  height: 100%;
}

.suite-sidebar {
  width: 220px;
  background: var(--el-bg-color-page);
  border-right: 2px solid var(--el-border-color-light);
  overflow-y: auto;
}

.suite-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--el-bg-color-page);
}

.tile-nav {
  padding: 12px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  margin: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--el-text-color-regular);
  
  &:hover {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    
    .nav-icon {
      color: var(--el-color-primary);
    }
  }
  
  &.active {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    font-weight: 500;
    
    .nav-icon {
      color: var(--el-color-primary);
    }
  }
}

.nav-icon {
  font-size: 16px;
  margin-right: 12px;
  width: 24px;
  transition: color 0.2s;
}

.nav-text {
  font-size: 14px;
  white-space: nowrap;
}

.suite-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--el-bg-color-page);
}

.input-box {
  border-radius: 12px !important;
}

/* 或者更具体地针对textarea元素 */
.input-box .el-textarea__inner {
  border-radius: 12px !important;
}

.image-links {
  /* 垂直排列 */
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.image-link {
  max-width: 100%; /* 🌟 同时限制相对和绝对大小 */
  height: auto; /* 🌟 保持比例 */
  border-radius: 12px;
  object-fit: contain; /* 🌟 智能适应容器 */
}

.update-btn {
  transition: all 0.3s ease;
  background: linear-gradient(90deg, #409eff var(--progress), transparent var(--progress));
}
.update-btn.installed {
  background: #67c23a !important;
}
.update-btn:hover {
  transform: scale(1.05);
}
.progress-text {
  margin-left: 5px;
  font-size: 0.8em;
}
.fa-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.update-btn {
  --progress: calc(var(--download-progress) * 1%);
}

/* 让菜单容器使用 flex 纵向布局，并占满高度 */
.el-menu-vertical {
  background-color: var(--el-bg-color-page)!important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 选择倒数第二个菜单项（system）*/
.el-menu-item:nth-last-child(2) {
  margin-top: auto; /* 这个属性会让它和后面的元素自动推到容器底部 */
}

.text-container {
  padding: 20px;
}

.file-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.text-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.file-item {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.file-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-box-shadow-light);
}

.file-icon {
  margin-right: 12px;
  font-size: 24px;
  color: var(--el-color-primary);
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
  .file-actions-btn {
    margin: 2px!important;
  }
  .a {
    margin: 0px!important;
  }
}

.image-container {
  padding: 20px;
}

.image-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  aspect-ratio: 1;
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-box-shadow-light);
}

.video-container {
  padding: 20px;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-name {
  color: var(--el-text-color);
  font-size: 12px;
  text-shadow: 0 1px 2px var(--el-box-shadow-light);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-actions {
  display: flex;
  gap: 1px;
  .image-actions-btn {
    margin: 3px!important;
  }
  .a {
    margin: 3px!important;
  }
}

/* 添加预览样式 */
.image-preview-dialog {
  .el-dialog__body {
    padding: 0;
    height: auto;
  }
  
  .preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: var(--bg-color);
  }
  
  .preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    justify-content: center;
    align-items: center;
  }
}

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 16px;
  width: 100%;
}

/* 添加响应式适配 */
@media (max-width: 768px) {
  .vendor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .vendor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.vendor-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.vendor-card:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.vendor-card.selected {
  border-color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-7);
}

.vendor-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 8px;
  border-radius: 50%;
}

.vendor-name {
  font-size: 14px;
  color: var(--el-text-color);
}

.mini-vendor-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
  margin-left: 2px;
}

.spinner-rotate {
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.input-container.expanded-input {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--el-bg-color);
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.input-container.expanded-input .input-box textarea {
    height: calc(100vh - 100px) !important;
    min-height: auto !important;
}

/* 添加移动端样式 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    left: 0;
    top: 30px;
    height: calc(100vh - 30px) !important;
    z-index: 2000;
    transition: transform 0.3s ease;
  }
  
  .mobile-sidebar:not(.el-menu--collapse) {
    width: 200px !important;
  }
  
  .sidebar-mask {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 30px);
    background: rgba(0,0,0,0.5);
    z-index: 1999;
  }
  
  .mobile-menu {
    padding: 0 12px;
    cursor: pointer;
    color: var(--el-text-color-regular);
  }
  
  .main-container {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .suite-content {
    padding: 10px;
    /* 隐藏横向滚动条 */
    overflow-x: hidden;
  }
  .suite-sidebar {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 50px !important; /* 缩小侧边栏宽度 */
  }
  .tile-nav {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 45px !important; /* 缩小导航栏宽度 */
  }
  .nav-text {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 0 !important;
    padding: auto;
    margin: auto;
    font-size: 0 !important;
    display: none !important; /* 隐藏文字 */
  }
  .nav-icon {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 40px !important;
    font-size: 20px !important; /* 调整图标大小 */
  }
  .nav-item {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 40px !important;
  }
  .settings-form{
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
  }
  .file-list {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
  }
  .page .text-container {
    min-width: 0px!important;
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .file-item {
    width: auto !important;
    padding: 3px!important;
    max-width: 230px!important;
    min-width: 0px!important;
    .file-info {
      width: auto!important;
      padding-left: 1px!important;
      padding-right: 1px!important;
      margin-left: 1px!important;
      margin-right: 1px!important;
      min-width: 0px!important;
      max-width: 40%!important;
    }
    .file-actions {
      gap: 1px!important;
      margin-left: 1px!important;
      padding-left: 1px!important;
      padding-right: 1px!important;
      margin-left: 1px!important;
      margin-right: 1px!important;
      min-width: 0px!important;
    }
  }
  .page .image-container {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .image-item {
    min-width: 0px!important;
  }
  .page .video-container {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .video-item {
    min-width: 0px!important;
  }
  .el-dialog {
    width: 250px !important;
  }
  .page .logo-container{
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .license-notice {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
}

/* ComfyUI容器样式 */
.comfyui-iframe-container {
  position: relative;
  height: calc(100vh - 120px);
  background: var(--el-bg-color-page);
}

.comfyui-iframe {
  width: 100%;
  height: 100%;
  background: var(--el-bg-color-page);
}

.server-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 元素间距 */
  width: 100%; /* 占满父容器宽度 */
  margin-bottom: 8px; /* 项间距 */
  .el-input {
    flex: 1; /* 输入框占据剩余空间 */
    min-width: 0; /* 防止内容溢出 */
  }

  .el-button {
    flex-shrink: 0; /* 按钮不收缩 */
  }
}

.add-server-btn {
  width: 100%;
  margin-top: 10px;
}

.no-server-tip {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-box {
  width: 100%;
  margin-bottom: 10px;
}

.video-wrapper {
  position: relative;
  display: inline-block; /* 防止超出容器 */
}

.delete-overlay-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.knowledge-card {
  .cover-image {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: var(--el-bg-color-page);
    border-radius: 8px;
  }
}

.tag-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .tag-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    padding: 12px;
    background: var(--el-bg-color-page);
    border-radius: 8px;
    
    .sticker-thumb {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      object-fit: contain;
      border: 1px solid var(--el-border-color);
      border-radius: 4px;
      background: var(--el-bg-color-page);
    }

    .el-input {
      flex: 1;
      min-width: 0;
      
      &__wrapper {
        height: 40px;
      }
    }
  }
}

.el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 30px;
  margin: 0;
  
  .el-upload-list__item {
    margin: 0 8px 8px 0;
  }

  .el-upload-list__item .el-icon-close-tip{
    display: none !important;
  }
}

.sticker-upload {
  margin-left: 24px;
  .el-upload {
    background-color: var(--el-bg-color-page);
  }
}

.search-input {
  margin-bottom: 10px;
}
.fastapi-iframe {
  min-height: 85vh!important;
}

.tts-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* 确保垂直居中 */
  margin-bottom: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.message:hover .tts-controls {
  opacity: 1;
}

.tts-status {
  color: var(--el-color-info);
  font-size: 11px;
  margin-left: 8px; /* 文字左侧也保持相同间距 */
}

.message.assistant .tts-controls {
  background: var(--el-bg-color);
}

.message.assistant .tts-controls .tts-status {
  color: var(--el-primary-color)
}

/* 保持按钮之间的间距不变 */
.tts-controls .el-button {
  margin: 0; /* 移除默认边距 */
}

.model-option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}